<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, shrink-to-fit=no">
<title>Insert title here</title>
<link href="../static/bootstrap-4.1.1/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.my-title {
	position: fixed; /* 固定 */
	left: 0;
	top: 0;
	height: 75px;
	width: 100%;
	background-color: #003377;
	color: white;
	font-size: 30px;
	line-height: 75px;
}

.my-nav {
	position: fixed; /* 固定 */
	left: 0;
	top: 75px;
	bottom: 40px;
	width: 159px;
	background-color: #DDDDDD;
	border-right: 1px solid #DDDDDD;
}

.my-content {
	position: fixed; /* 固定 */
	left: 160px;
	right: 0;
	top: 75px;
	bottom: 40px;
	background-color: #EEEEEE;
}

.my-copyright {
	position: fixed; /* 固定 */
	left: 0;
	height: 40px;
	bottom: 0;
	width: 100%;
	background-color: gray;
}

#curr-user {
	position: absolute; /* 绝对定位 ，相对于父级元素定位*/
	bottom: 11px;
	right: 5px;
	color: white;
	font-size: 14px;
	line-height: 20px;
}

.dropdown {
	position: absolute; /* 绝对定位 ，相对于父级元素定位*/
	bottom: 11px;
	right: 50px;
	color: white;
	font-size: 14px;
	line-height: 20px;
}
.my-sub-menu-item{
display: block;/* 将行级元素转换为块级元素 */
font-size:17px;
line-height: 30px;/* 行高 */
text-align: center;
border-radius: 10px;
color: #3A0088;

}

/* 去掉下划线的 */
.my-sub-menu-item：link,.my-sub-menu-item:visited,.my-sub-menu-item:hover{
	text-decoration: none;
}

/* 鼠标放上去之后的样式 */
.my-sub-menu-item:hover {
	background-color: #FFFFBB;
	color:#223366;
	font-weight: bold;
}

.my-content>iframe {
	width: 100%;
	height: 100%;
	border: none;
}
</style>
</head>
<body>
	<div class="my-title">
		生产管理云系统
		<div class="dropdown">
			<a href="#" style="color: white">某用户 </a>


		</div>

		<div id="curr-user">退出</div>
	</div>
	<div class="my-nav" align="center">
		<!-- 导航栏 -->

		<div class="accordion" id="my-menu">
			<div class="card">
				<div class="card-header" id="headingOne">
					<h5 class="mb-0">
						<a href="#"  data-toggle="collapse"
							data-target="#safty-menu"> 安全管理 </a>
					</h5>
				</div>

				<div id="safty-menu" class="collapse " data-parent="#my-menu">
					<div class="card-body">
						<a href="#" class="my-sub-menu-item" target="myContentFram">用户登录</a> 
						<a href="#" class="my-sub-menu-item" target="myContentFram">主界面</a> 
						<a href="#" class="my-sub-menu-item" target="myContentFram">角色管理</a> 
						<a href="#" class="my-sub-menu-item" target="myContentFram">用户管理</a> 
						<a href="#" class="my-sub-menu-item" target="myContentFram">密码维护</a> 
						<a href="#" class="my-sub-menu-item" target="myContentFram">安全退出</a>
					</div>
				</div>
			</div>
		</div>
		<div class="my-content">
		<iframe name="myContentFram">
		
		</iframe>
		
		</div>
		<div class="my-copyright"></div>

		<!-- 加载js文件 -->
		<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript"
			src="../static/bootstrap-4.1.1/bootstrap.min.js"></script>
		<script type="text/javascript" src="../static/js/popper-1.14.3.min.js"></script>
</body>
</html>
